"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  ArrowLeft,
  UserCheck,
  Star,
  Calendar,
  Clock,
  MessageSquare,
  Video,
  Award,
  Building2,
  TrendingUp,
  DollarSign,
  Users,
} from "lucide-react"

export default function ExpertConsultationPage() {
  const router = useRouter()
  const [selectedExpert, setSelectedExpert] = useState(null)
  const [consultationType, setConsultationType] = useState("")
  const [consultationDate, setConsultationDate] = useState("")
  const [consultationTime, setConsultationTime] = useState("")
  const [consultationTopic, setConsultationTopic] = useState("")
  const [consultationDescription, setConsultationDescription] = useState("")

  // 模拟专家数据
  const experts = [
    {
      id: 1,
      name: "张明华",
      title: "连续创业者 & 天使投资人",
      avatar: "/placeholder.svg?height=80&width=80",
      rating: 4.9,
      reviews: 156,
      experience: "15年创业经验，3次成功退出",
      specialties: ["商业模式", "融资策略", "团队管理"],
      companies: ["阿里巴巴", "腾讯", "字节跳动"],
      price: 1000,
      availability: "本周可约",
      description: "曾创立3家公司并成功退出，总估值超过50亿。现为多家知名VC合伙人，专注早期项目投资。",
      achievements: ["创立的公司累计融资超过10亿", "投资项目成功率85%", "帮助100+创业者成功融资"],
    },
    {
      id: 2,
      name: "李小雨",
      title: "营销专家 & 品牌顾问",
      avatar: "/placeholder.svg?height=80&width=80",
      rating: 4.8,
      reviews: 89,
      experience: "12年营销经验，服务500+品牌",
      specialties: ["品牌营销", "增长策略", "用户运营"],
      companies: ["宝洁", "联合利华", "小红书"],
      price: 800,
      availability: "明天可约",
      description: "前宝洁品牌总监，小红书增长负责人。擅长0-1品牌打造和用户增长策略。",
      achievements: ["操盘过10个亿级品牌", "单项目最高ROI达到1:15", "培养营销人才200+"],
    },
    {
      id: 3,
      name: "王建国",
      title: "技术专家 & CTO",
      avatar: "/placeholder.svg?height=80&width=80",
      rating: 4.7,
      reviews: 67,
      experience: "18年技术经验，AI领域专家",
      specialties: ["技术架构", "AI应用", "产品开发"],
      companies: ["百度", "美团", "滴滴"],
      price: 1200,
      availability: "下周可约",
      description: "前百度AI实验室负责人，美团技术VP。在AI、大数据、云计算领域有深厚积累。",
      achievements: ["主导开发过DAU过亿的产品", "拥有AI相关专利50+", "技术团队管理经验1000+"],
    },
    {
      id: 4,
      name: "陈财务",
      title: "财务专家 & CFO",
      avatar: "/placeholder.svg?height=80&width=80",
      rating: 4.9,
      reviews: 123,
      experience: "20年财务经验，IPO专家",
      specialties: ["财务规划", "IPO上市", "投资分析"],
      companies: ["德勤", "普华永道", "小米"],
      price: 1500,
      availability: "本周可约",
      description: "前德勤合伙人，小米CFO。帮助20+公司成功IPO，融资总额超过500亿。",
      achievements: ["操盘IPO项目20+", "融资成功率95%", "财务合规零事故"],
    },
  ]

  const consultationTypes = [
    { value: "business-model", label: "商业模式咨询", icon: Building2 },
    { value: "funding", label: "融资策略", icon: DollarSign },
    { value: "marketing", label: "营销推广", icon: TrendingUp },
    { value: "team", label: "团队管理", icon: Users },
    { value: "product", label: "产品开发", icon: Star },
    { value: "other", label: "其他问题", icon: MessageSquare },
  ]

  const timeSlots = ["09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00", "19:00", "20:00"]

  const handleBookConsultation = () => {
    if (!selectedExpert || !consultationType || !consultationDate || !consultationTime || !consultationTopic) {
      alert("请填写完整信息")
      return
    }

    // 模拟预约成功
    alert(
      `预约成功！\n专家：${selectedExpert.name}\n时间：${consultationDate} ${consultationTime}\n主题：${consultationTopic}`,
    )
    router.back()
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 顶部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center space-x-4">
            <Button variant="ghost" onClick={() => router.back()}>
              <ArrowLeft className="w-4 h-4 mr-2" />
              返回
            </Button>
            <div className="flex items-center space-x-2">
              <UserCheck className="w-6 h-6 text-blue-600" />
              <h1 className="text-xl font-semibold text-slate-900">专家咨询预约</h1>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 专家列表 */}
          <div className="lg:col-span-2 space-y-6">
            <div>
              <h2 className="text-2xl font-bold text-slate-900 mb-2">选择专家</h2>
              <p className="text-slate-600">选择最适合你需求的创业导师，获得专业指导</p>
            </div>

            <div className="space-y-4">
              {experts.map((expert) => (
                <Card
                  key={expert.id}
                  className={`cursor-pointer transition-all duration-200 ${
                    selectedExpert?.id === expert.id ? "ring-2 ring-blue-500 bg-blue-50" : "hover:shadow-md"
                  }`}
                  onClick={() => setSelectedExpert(expert)}
                >
                  <CardContent className="p-6">
                    <div className="flex space-x-4">
                      <Avatar className="w-20 h-20">
                        <AvatarImage src={expert.avatar || "/placeholder.svg"} />
                        <AvatarFallback>{expert.name[0]}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="flex items-start justify-between mb-3">
                          <div>
                            <h3 className="text-xl font-semibold text-slate-900">{expert.name}</h3>
                            <p className="text-slate-600">{expert.title}</p>
                          </div>
                          <div className="text-right">
                            <div className="flex items-center space-x-1 mb-1">
                              <Star className="w-4 h-4 text-yellow-500 fill-current" />
                              <span className="font-medium">{expert.rating}</span>
                              <span className="text-sm text-slate-500">({expert.reviews})</span>
                            </div>
                            <div className="text-xl font-bold text-blue-600">¥{expert.price}/小时</div>
                          </div>
                        </div>

                        <p className="text-sm text-slate-600 mb-4">{expert.description}</p>

                        <div className="grid grid-cols-2 gap-4 mb-4">
                          <div>
                            <span className="text-xs text-slate-500 block mb-1">专业领域</span>
                            <div className="flex flex-wrap gap-1">
                              {expert.specialties.map((specialty, index) => (
                                <Badge key={index} variant="outline" className="text-xs">
                                  {specialty}
                                </Badge>
                              ))}
                            </div>
                          </div>
                          <div>
                            <span className="text-xs text-slate-500 block mb-1">工作经历</span>
                            <div className="flex flex-wrap gap-1">
                              {expert.companies.slice(0, 3).map((company, index) => (
                                <Badge key={index} variant="secondary" className="text-xs">
                                  {company}
                                </Badge>
                              ))}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-4 text-sm text-slate-600">
                            <span>{expert.experience}</span>
                            <Badge className="bg-green-100 text-green-700">{expert.availability}</Badge>
                          </div>
                          <div className="flex space-x-2">
                            <Button variant="outline" size="sm">
                              <MessageSquare className="w-4 h-4 mr-1" />
                              消息
                            </Button>
                            <Button variant="outline" size="sm">
                              <Video className="w-4 h-4 mr-1" />
                              视频
                            </Button>
                          </div>
                        </div>

                        {selectedExpert?.id === expert.id && (
                          <div className="mt-4 p-4 bg-blue-50 rounded-lg">
                            <h4 className="font-medium text-slate-900 mb-2">主要成就</h4>
                            <ul className="space-y-1">
                              {expert.achievements.map((achievement, index) => (
                                <li key={index} className="text-sm text-slate-600 flex items-center space-x-2">
                                  <Award className="w-3 h-3 text-blue-600" />
                                  <span>{achievement}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                        )}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>

          {/* 预约表单 */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>预约咨询</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <label className="text-sm font-medium text-slate-700">咨询类型</label>
                  <Select value={consultationType} onValueChange={setConsultationType}>
                    <SelectTrigger className="mt-1">
                      <SelectValue placeholder="选择咨询类型" />
                    </SelectTrigger>
                    <SelectContent>
                      {consultationTypes.map((type) => {
                        const Icon = type.icon
                        return (
                          <SelectItem key={type.value} value={type.value}>
                            <div className="flex items-center space-x-2">
                              <Icon className="w-4 h-4" />
                              <span>{type.label}</span>
                            </div>
                          </SelectItem>
                        )
                      })}
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">咨询日期</label>
                  <Input
                    type="date"
                    className="mt-1"
                    value={consultationDate}
                    onChange={(e) => setConsultationDate(e.target.value)}
                    min={new Date().toISOString().split("T")[0]}
                  />
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">咨询时间</label>
                  <Select value={consultationTime} onValueChange={setConsultationTime}>
                    <SelectTrigger className="mt-1">
                      <SelectValue placeholder="选择时间段" />
                    </SelectTrigger>
                    <SelectContent>
                      {timeSlots.map((time) => (
                        <SelectItem key={time} value={time}>
                          {time}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">咨询主题</label>
                  <Input
                    placeholder="简要描述咨询主题"
                    className="mt-1"
                    value={consultationTopic}
                    onChange={(e) => setConsultationTopic(e.target.value)}
                  />
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">详细描述</label>
                  <Textarea
                    placeholder="详细描述你的问题和期望得到的帮助..."
                    className="mt-1 min-h-[100px]"
                    value={consultationDescription}
                    onChange={(e) => setConsultationDescription(e.target.value)}
                  />
                </div>

                {selectedExpert && (
                  <div className="p-4 bg-slate-50 rounded-lg">
                    <h4 className="font-medium text-slate-900 mb-2">预约信息</h4>
                    <div className="space-y-1 text-sm text-slate-600">
                      <div>专家：{selectedExpert.name}</div>
                      <div>费用：¥{selectedExpert.price}/小时</div>
                      {consultationDate && consultationTime && (
                        <div>
                          时间：{consultationDate} {consultationTime}
                        </div>
                      )}
                    </div>
                  </div>
                )}

                <Button className="w-full" onClick={handleBookConsultation} disabled={!selectedExpert}>
                  确认预约
                </Button>
              </CardContent>
            </Card>

            {/* 咨询说明 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">咨询说明</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm text-slate-600">
                <div className="flex items-start space-x-2">
                  <Clock className="w-4 h-4 mt-0.5 text-blue-600" />
                  <span>每次咨询时长为1小时，可根据需要延长</span>
                </div>
                <div className="flex items-start space-x-2">
                  <Video className="w-4 h-4 mt-0.5 text-blue-600" />
                  <span>支持视频通话、语音通话和文字咨询</span>
                </div>
                <div className="flex items-start space-x-2">
                  <Calendar className="w-4 h-4 mt-0.5 text-blue-600" />
                  <span>可提前24小时免费取消或改期</span>
                </div>
                <div className="flex items-start space-x-2">
                  <MessageSquare className="w-4 h-4 mt-0.5 text-blue-600" />
                  <span>咨询后可获得专家的书面建议总结</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}
